<html>
<title>观察者模式-1数组模式</title>
<style>
 div{ width: 200px;height: 50px; border: 1px solid #ccc;}
</style>
 
<body>
    <select name="sel" id="sel">
        <option value="0">男式风格</option>
        <option value="1">女式风格</option>
    </select>
	   <input type="button" onclick="drop()" value="不引起广告的变化">
	    <br/>
	    <h1>面向过程,观察者模式来切换</h1>
    <div id="test1">11</div>
    <div id="test2">22</div>
    <div id="test3">广告</div>
</body>
<script>
/*var t=[];
console.log(t.length); //打印长度为0
t[t.length]='1'; //相当于 t[0]='1'
console.log(t.length);//打印长度为0
console.log(t);//打印 出数组
*/
    var sel = document.getElementById('sel');
    sel.observes = [];
    //添加一个观察者
    sel.attach = function(obj) {	
        this.observes[this.observes.length] = obj;
		//把对象放到数组里  数组的下标从0开始 数组为空时也就是 this.observes[0]=obj
    }
    //删除一个观察者
    sel.detach = function(obj) {
        for (var i = 0; i < this.observes.length; i+=1) {
		  
            if (this.observes[i] === obj) {
                delete this.observes[i];
            }
        }
    }
    //onchange 改变的时候通知
    sel.onchange = sel.notify = function() {
        for (var i = 0; i < this.observes.length; i+=1) {
            //循环通知 需要改变的   
            this.observes[i].update(this);
        }
    }
    //需要改变的
    var test2 = document.getElementById('test2');
    test2.update = function(sel) {
        if (sel.value == '1') {
            this.innerHTML = '化妆品';
        } else if (sel.value == '0') {
            this.innerHTML = '汽车 机械';
        }
    }
    test3.update = function(sel) {
        if (sel.value == '1') {
            this.innerHTML = 'test3的女 口红';
        } else if (sel.value == '0') {
            this.innerHTML = 'test3的男0 足球';
        }
    }
    sel.attach(test2); //调用改变
    sel.attach(test3);
	//删除监听
	function drop(){
	 sel.detach(test3);
	}
	
</script>
 
</html>
